<!--新增课程-->
<template>
  <div class="conintaer">
    <div class="left">
      <el-tree
        :data="data"
        ref="ass"
        :props="defaultProps"
        node-key="id"
        @node-click="handleNodeClick"
        :load="loadNode"
        lazy
        default-expand-all="true"
        style="color:#004ca7"
      ></el-tree>
      <!-- style="padding:27px 0px 0px 80px;color:#004ca7" -->
    </div>
    <div class="right">
      <div class="assessment-container">
        <div class="search-container" style="margin-top:0">
          <div class="search-container-item">
            <span>课程编号：</span>
            <el-input
              style="width: 152px"
              size="mini"
              placeholder="请输入内容"
              v-model="coursenum"
            ></el-input>
          </div>
          <div class="search-container-item">
            <span>课程名称：</span>
            <el-input
              style="width: 152px"
              size="mini"
              placeholder="请输入内容"
              v-model="coursename"
            ></el-input>
          </div>
          <div class="search-button" @click="cxfl" style="margin: 2px 15px 0 0;">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
          <!-- <el-button type="primary" icon="el-icon-search" @click="cxfl" size="mini">查询</el-button> -->
        </div>
      </div>
      <div class="plan-entry-table-container">
        <el-table
          :data="tableData"
          :key="timeStamps"
          ref="multipleTable"
          :current-row-key="currentKey"
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
        >
          <el-table-column align="center" type="selection" label="选择" width="80">
          </el-table-column>
          <el-table-column
            prop="courseCode"
            label="课程编号"
            align="center"
            width="300"
          >
          </el-table-column>
          <el-table-column prop="courseName" label="课程名称" align="center">
          </el-table-column>
          <el-table-column prop="courseIntro" label="简称" align="center">
          </el-table-column>
          <el-table-column prop="credit" label="学分" align="center">
          </el-table-column>
          <el-table-column prop="totalHours" label="总学时" align="center">
          </el-table-column>
          <el-table-column prop="level" label="适用培养层次" align="center">
          </el-table-column>
          <el-table-column prop="mainSubject" label="是否主干课" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="height:36px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="position: absolute;right: 0;"
        >
        </el-pagination> 
      </div>
      <!-- <div class="button-group">
        <el-button type="success" @click="addSubmit">保 存</el-button>
        <el-button type="danger" @click="addSubmit" style="margin-left:60px">取 消</el-button>
      </div> -->
      <div class="button-group">
      <div @click="addSubmit">
        <div>保 存</div>
      </div>
      <div @click="cancalS">
        <div>取 消</div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import { sz,reqGetTreeTableData,reqGetTreeTableDatahj,reqCheckBottomData} from "@/api/course/courses";
import { szChild,trainCourseSetNew} from "@/api/propositionReview/approval";
export default {
  data() {
    return {
      pageNo:1,
      pageSize:10,
      xueqi:"",
      xueqiList: [],
      subjectType: "",
      coursenum:"",
      coursename:"",
      xkmlList: [],
      teachingClassName: "",
      deptName: "",
      current: 1,
      size: 10,
      total: "",
      showManualEntryDialog: false,
      timeStamp: 0,
      timeStamps: 0,
      data: [],
      tableData: []
    };
  },
  created() {
    this.getleft();
    console.log()
    // this.getrightt();
  },
  methods: {
    addSubmit(){
      this.$router.push({
        path: "/admin/training/setCourseType",
        query:{
          type:'setCourse'
        }
      });
      if((JSON.parse(localStorage.getItem('addCourse'))).length > 0){
        let arr = JSON.parse(localStorage.getItem('addCourse'));
        let sel = this.$refs.multipleTable.selection;
        if(sel.length > 0){
          sel.forEach(item => {
            arr.push(item);
            item["kcid"] = item["id"];
            delete item["id"]
          })
        }
        var newData = JSON.stringify(arr).replace(/courseCode/g,'kcph').replace(/courseName/g,'coursename').replace(/credit/g,'xuefen').replace(/totalHours/g,'xuehour').replace(/xueqi/g,'season').replace(/xxtype/g,'xxlx');
        localStorage.setItem('addCourse',newData);
      } else {
        var data = this.$refs.multipleTable.selection;
        data.forEach(item => {
          item["kcid"] = item["id"];
          delete item["id"]
        })
        var newDataT = JSON.stringify(data).replace(/courseCode/g,'kcph').replace(/courseName/g,'coursename').replace(/credit/g,'xuefen').replace(/totalHours/g,'xuehour').replace(/xueqi/g,'season').replace(/xxtype/g,'xxlx');
        localStorage.setItem('addCourse',newDataT);
      }
    },
    cancalS(){
      this.$router.push({
        path: "/admin/training/setCourseType",
        query:{
          type:'setCourse'
        }
      });
    },
    // editItem(id) {
    //   this.$router.push({
    //     path: "/admin/course/addCoursesr",
    //     query: { id: id }
    //   });
    // },
    // 点击查询
    cxfl(){
      trainCourseSetNew(this.coursenum,this.coursename,this.current,this.size).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        // this.timeStamps++;
      });
      // if(this.coursenum && this.coursename != ''){
        
      // } else {
      //   this.$message({
      //     type:'info',
      //     message:'两者不能有空值！'
      //   })
      // }
    },
    async getTreeData() {
      const tableDataResult = await reqGetTreeTableData(
        this.deptName,
        this.teachingClassName,
        this.current,
        this.size
      );
      if (tableDataResult.data.code == 200) {
        this.tableData = tableDataResult.data.data;
         this.timeStamps++;
        // this.treeTableData.forEach((item) => {
        //   this.$set(item, "checked", false);
        // });
         this.total = tableDataResult.data.data[0].tol;
      }
    },
    async getTreeDatahj() {
      const tableDataResulthj = await reqGetTreeTableDatahj(
        this.deptName,
        this.teachingClassName,
        this.current,
        this.size
      );
      if (tableDataResulthj.data.code == 200) {
        this.tableData = tableDataResulthj.data.data;
         this.timeStamps++;
        // this.treeTableData.forEach((item) => {
        //   this.$set(item, "checked", false);
        // });
         this.total = tableDataResulthj.data.data[0].tol;
      }
    },
    // tjkc() {
    //   this.$router.push({ path: "/admin/course/addCourse" });
    // },
    // hjkcwh() {
    //   this.$router.push({ path: "/admin/course/awardCourse" });
    // },
    
    getleft() {
      let parentId = "0";
      return new Promise(() => {
        sz(parentId).then(res => {
          this.tablelist = res.data.data;
          this.data = [];
          for (let i = 0; i < this.tablelist.length; i++) {
            if (this.tablelist[i].deptCategory == 5) {
              let obj = {
                id: this.tablelist[i].id,
                label: this.tablelist[i].deptName,
                children: []
              };
              this.data.push(obj);
            }
          }
        });
      });
    },

    handleNodeClick(val, val2) {
      this.coursenum = '';
      this.coursename = '';
      if(val2.level != '1'){
        this.teachingClassName = val.id;
        this.getrightt();
      }
      // this.deptName = val2.parent.data.label;
      // if (val.leaf) {
      //   console.log("我是最后一个节点");
      //   console.log(val, "val");
      // } else {
      //   console.log("还有节点");
      // }
      // if(val.children&&val.children.length<=0){
      //     let parentId = val.id;
      //     return new Promise(() => {
      //       sz(parentId).then((res) => {
      //         for (let i = 0; i < res.data.data.length; i++) {
      //           let obj = {
      //             id: res.data.data[i].id,
      //             label: res.data.data[i].deptName,
      //           };
      //           this.data[i].children.push(obj);
      //         }
      //       });
      //     });
      // }else{
      //   console.log(val)
      // }
    },
    getrightt() {
      return new Promise(() => {
        szChild(this.pageNo,this.pageSize,this.teachingClassName).then(res => {
          this.tableData = res.data.data;
          this.timeStamp++;
          this.total = res.data.data.length;
          this.pageNo = 1;
        });
      });
    },
    pjByIdGuide() {},
    pjByIdGuide2() {},
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getrightt();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getrightt();
    },
    //
    loadNode(node, resolve) {
      let parentId = node.data.id;
      if (node.level === 1) {
        sz(parentId).then(res => {
          let data = res.data.data;
          data.forEach(item => {
            item.label = item.deptName;
            item.leaf = true;
          });
          return resolve(data);
        });
      }
      if (node.level > 1) return resolve([]);
    }
  }
};
</script>
<style scoped lang="less">
@import "../../../styles/print-entry.less";

/deep/.el-tree-node__label{
  font-size: 16px;
}
@fontFamily: 'Microsoft YaHei';
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          > th.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.button-group {
    cursor: pointer;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 50px;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: #ff3819;
        border: 1px solid #ff3819;
        background: #ffefef;
      }
    }
  }
.conintaer {
  width: 100%;
  display: flex;
  .left {
    width: 15%;
    // border: 1px solid #004ca7;
  }
  .right {
    width: 100%;
    // padding: 0 35px 0;
    position: relative;
    .assessment-container {
      width: 100%;
      .search-container {
        justify-content: flex-start;
      }
    }
  }
  .img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .plan-entry-table-container {
    margin: 15px 0;
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }
    /deep/.el-table th,
    .el-table tr {
      background-color: #edf2f9;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }
    /deep/.el-table thead {
      color: #004ca7 !important;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .el-checkbox__inner:hover {
      border-color: #004ca7;
    }

    .el-checkbox__inner {
      border: 1px solid #004ca7;
      border-radius: 0;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #004ca7;
      border-color: #004ca7;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #004ca7;
    }

    .el-checkbox.is-bordered.is-checked {
      border-color: #004ca7;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #004ca7;
    }
  }
}
</style>
